<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>购物车</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/distpicker.js"></script>
	<link rel="stylesheet" href="layui/css/layui.css" media="all" />
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/font-awesome.css" rel="stylesheet">
	<script src="layui/layui.js"></script>
<!--===============================================================================================-->	
	<link rel="icon" type="image/png" href="images/icons/favicon.png"/>
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="fonts/linearicons-v1.0.0/icon-font.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->	
	<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/perfect-scrollbar/perfect-scrollbar.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="css/util.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
	<script type="text/javascript">
		$("#distpicker").distpicker();
	</script>
	<script type="text/javascript">
		//动态化商品明细
		function search(){
			$.post('${pageContext.request.contextPath}/detailed/findDe',
					function(res){
						//$("#shopCarRow").html("");
						res=res.data;
						 for(var i=0;i<res.length;i++){
							 var pro=res[i];
							 var s ="<tr class='table_row' id='shopCarRow'>";
							 		s+="<td class='column-1'><input type='checkbox' checked='true' class='s_d' onclick='oneSelect(this)' ></td>"
									 s+="<td class='column-2'>";
										s+="<div class='how-itemcart1'>";
											s+="<a href='"+ pro.d_url +"'><img src='${pageContext.request.contextPath}/" + pro.d_img + "' alt='IMG'></a>";
										s+="</div>";
									 s+="</td>"; 
									 s+="<td class='column-3'>" + pro.d_name + "</td>";
									 s+="<td class='column-4'>" + pro.d_price + ".00</td>";
									 s+="<td class='column-5'>";
										s+="<div class='wrap-num-product flex-w m-l-auto m-r-0'>";
											s+="<div class='btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m' onclick='down(this)'>";
												s+="<i class='fs-16 zmdi zmdi-minus'></i>";
											s+="</div>";
											s+="<input class='mtext-104 cl3 txt-center num-product' id='num' type='number' name='" +pro.d_id+"' value='" + pro.d_many + "'>";
											s+="<div class='btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m' onclick='add(this)'>";
												s+="<i class='fs-16 zmdi zmdi-plus'></i>";
											s+="</div>";
										s+="</div>";
									 s+="</td>"; 
									 s+="<td class='column-6' id='d_total' style='color:red;'>" + pro.d_total + "</td>";
									 s+="<td class='column-7'><a href='javascript:void(0)' onclick='delProItem("+pro.d_id+")'>删除</a></td>";
								 s+="</tr>";
							$("#shopCarRow").append($(s));
						 }
					 Total();
			},'json');
		}
		$(function(){
			search();
		});
		
		//删除
		function delProItem(d_id) {
			layer.confirm('你确定要删除吗？', function(index) {
				$.post("http://localhost:8080/FiveClothes/detailed/delDe",{"id":d_id},
						function(res) {
							if (res) {
								layer.msg('删除成功', {
									time : 1000
								}, function() {
									window.location.reload();//刷新父页面
								});
							} else {
								layer.msg('删除失败，请稍后重试！');
							}
						}, "json");
				layer.close(index);
			});
		}
		//全选功能
		function allSelect(obj) {
			if (obj.checked) {
				$(".s_d").prop("checked", true);
			} else {
				$(".s_d").prop("checked", false);
			}
			Total();
		}
		//计算总价
		function Total() {
			var $tr = $("#shopCarRow").find("tr[id]");
			var summer = 0;
            $tr.each(function(i, dom) {
                var num = $(dom).children(".column-5").find("input").val(); //商品数量
                var price = num * $(dom).children(".column-4").text(); //单价
                
                $(dom).children(".column-6").html("$ "+price.toFixed(2)); //显示商品小计
				//判断是否被选中,如果选中计算总价
				var checked = $(dom).children(".column-1").children().is(":checked");
				
				if(checked){
					summer += price; //总价
				}
            });
            $("#total").text("$ "+summer.toFixed(2));
            $("#total2").text("$ "+summer.toFixed(2));
		}
		Total(); 
		//单个选中或取消
		function oneSelect(obj) {
			var ckedCount = $(".s_d:checked").length;//获取被选中的单个复选框的数量
			var totalCount = $(".s_d").length;//获取复选框的总数量
			if (ckedCount == totalCount) {
				$("#s_all").prop("checked", true);
			} else {
				$("#s_all").prop("checked", false);
			}
			Total();
		}
		
		//减少
		function down(obj){
			 var id=$(obj).parent().find("input").attr("name");//获取商品明细Id
			 
		       var $ele= $(obj).next(); //找到第一个哥哥 
		         var n=parseInt($ele.val());  
		         if(n==1){
		          layer.msg("不能在减了，再减就没有了！");
		          return
		         }
		         $ele.val(--n); //数量减1
		         var $td= $(obj).parent().parent().prev();	 
		         var dj= $($td.get(0)).html(); //获取单价
		         var $th2=$(obj).parent().next();
		         $th2.html(dj*n);//更新小计
		         Total();//重新计算总计
		         updateNum(id,n,dj);//更新数据库
		}
		//增加
		function add(obj){
			var id=$(obj).parent().find("input").attr("name");//获取商品明细Id
	        var $ele= $(obj).prev(); //找到第一个哥哥 
	         var n=parseInt($ele.val());
	         $ele.val(++n); //数量加1
	         var $td= $(obj).parent().parent().prev();	 
	         var dj= $($td.get(0)).html(); //获取单价
	         var $th2=$(obj).parent().next();
	         $th2.html(dj*n);//更新小计
	     	Total();//重新计算总计
	         updateNum(id,n,dj);//更新数据库 
		}
		//更新购物车商品对应的数量
	      function updateNum(id,num,nowPrice){
	        $.post("http://localhost:8080/FiveClothes/detailed/updateShopCar",{"id":id,"num":num,"nowPrice":nowPrice},function(res){
	               console.log(res.success);
	        },"json");
	      }
	</script>
</head>
<body class="animsition">
	<!-- 头部 -->
	<jsp:include page="header.jsp"></jsp:include>

	<!-- breadcrumb -->
	<div class="container">
		<div class="bread-crumb flex-w p-l-25 p-r-15 p-t-30 p-lr-0-lg">
			<a href="index.jsp" class="stext-109 cl8 hov-cl1 trans-04">
				主页
				<i class="fa fa-angle-right m-l-9 m-r-10" aria-hidden="true"></i>
			</a>

			<span class="stext-109 cl4">
				购物车
			</span>
		</div>
	</div>
		

	<!-- Shoping Cart -->
	<form class="bg0 p-t-75 p-b-85">
		<div class="container">
			<div class="row">
				<div class="col-lg-10 col-xl-12 m-lr-auto m-b-50">
					<div class="m-l-25 m-r--38 m-lr-0-xl">
						<!-- 循环显示 -->
						<div class="wrap-table-shopping-cart">
							<table class="table-shopping-cart" id="shopCarRow">
								<tr class="table_head">
									<th class="column-1"><input type="checkbox" checked="true" name="s_all" class="s_all tr_checkmr" id="s_all" onclick='allSelect(this)'><label for=""> 全选</label></th>
									<th class="column-2" style="padding-left: 35px;">产品图</th>
									<th class="column-3">产品名</th>
									<th class="column-4">价钱</th>
									<th class="column-5">数量</th>
									<th class="column-6">小计</th>
									<th class="column-7">操作</th>
								</tr>

								<!-- 循环
								<tr class="table_row">
									
								</tr> 
								-->
							</table>
						</div>
					</div>
				</div>

				<div class="col-sm-10 col-lg-7 col-xl-12 m-lr-auto m-b-50">
					<div class="bor10 p-lr-40 p-t-30 p-b-40 m-l-63 m-r-40 m-lr-0-xl p-lr-15-sm">
						<h4 class="mtext-109 cl2 p-b-30">
							购物车总计
						</h4>

						<div class="flex-w flex-t bor12 p-b-13">
							<div class="size-208">
								<span class="stext-110 cl2">
									总价:
								</span>
							</div>

							<div class="size-209">
								<span class="mtext-110 cl2" id="total" style='color:red;'>
									
								</span>
							</div>
						</div>

						<div class="flex-w flex-t bor12 p-t-15 p-b-30">
							<div class="size-208 w-full-ssm">
								<span class="stext-110 cl2">
									配送方式:
								</span>
							</div>

							<div class="size-209 p-r-18 p-r-0-sm w-full-ssm">
								<p class="stext-111 cl6 p-t-2">
									请仔细填选收货地址，以免不必要的麻烦，如果您需要任何帮助，请联系我们。
								</p>
								
								
								<div class="p-t-15">
									<span class="stext-112 cl8">
										请选择
									</span>

									<div class="rs1-select2 rs2-select2 bor8 bg0 m-b-12 m-t-9">
										<select class="js-select2" name="time">
											<option>配送方式</option>
											<option>顺丰</option>
											<option>申通</option>
											<option>圆通</option>
											<option>邮政</option>
										</select>
										<div class="dropDownSelect2"></div>
									</div>
									<div>
										
									</div>
									<div class="bor8 bg0 m-b-12" data-toggle="distpicker" style="border:none;">
										<select data-province="----选择省----"></select> 
										<select data-city="----选择市----"></select> 
										<select data-district="----选择区----"></select>
									</div>

									<div class="bor8 bg0 m-b-22">
										<input class="stext-111 cl8 plh3 size-111 p-lr-15" type="text" name="name" placeholder="真实姓名">
									</div>
									<div class="bor8 bg0 m-b-22">
										<input class="stext-111 cl8 plh3 size-111 p-lr-15" type="text" name="phone" placeholder="联系方式">
									</div>
									<!-- <div class="flex-w">
										<div class="flex-c-m stext-101 cl2 size-115 bg8 bor13 hov-btn3 p-lr-15 trans-04 pointer">
											确定
										</div>
									</div> -->
								</div>
							</div>
						</div>

						<div class="flex-w flex-t p-t-27 p-b-33">
							<div class="size-208">
								<span class="mtext-101 cl2">
									总价
								</span>
							</div>

							<div class="size-209 p-t-1">
								<span class="mtext-110 cl2" id="total2" style='color:red;'>
								
								</span>
							</div>
						</div>

						<button class="flex-c-m stext-101 cl0 size-116 bg3 bor14 hov-btn3 p-lr-15 trans-04 pointer">
							进行结算
						</button>
					</div>
				</div>
			</div>
		</div>
	</form>
		
	
		

	<!-- 引入页脚 -->
	<jsp:include page="footer.jsp"></jsp:include>


	<!-- Back to top -->
	<div class="btn-back-to-top" id="myBtn">
		<span class="symbol-btn-back-to-top">
			<i class="zmdi zmdi-chevron-up"></i>
		</span>
	</div>

<!--===============================================================================================-->	
	<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
	<script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
	<script src="vendor/bootstrap/js/popper.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
	<script src="vendor/select2/select2.min.js"></script>
	<script>
		$(".js-select2").each(function(){
			$(this).select2({
				minimumResultsForSearch: 20,
				dropdownParent: $(this).next('.dropDownSelect2')
			});
		})
	</script>
<!--===============================================================================================-->
	<script src="vendor/MagnificPopup/jquery.magnific-popup.min.js"></script>
<!--===============================================================================================-->
	<script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
	<script>
		$('.js-pscroll').each(function(){
			$(this).css('position','relative');
			$(this).css('overflow','hidden');
			var ps = new PerfectScrollbar(this, {
				wheelSpeed: 1,
				scrollingThreshold: 1000,
				wheelPropagation: false,
			});

			$(window).on('resize', function(){
				ps.update();
			})
		});
	</script>
<!--===============================================================================================-->
	<script src="js/main.js"></script>
</body>
</html>